/*-----------------------------------------main-----------------------------*/
$.ajax({ //一个Ajax过程
    type: "post",  //以post方式与后台沟通
    url: "index/plantArea", //与此php页面沟通
    dataType: 'json',//从php返回的值以 JSON方式 解释
    success: function (json) {
        var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
        var option = {
            tooltip: { //提示框组件
                trigger: 'item', //触发类型(饼状图片就是用这个)
                formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
            },
            color: ['#BF4746', '#83B15A','#DE9B32', '#49B4D7' ],
            legend: {
                textStyle: {
                    color: 'white'
                },
                orient: 'vertical',
                x: '0%',
                top: '0%',
                itemHeight: 10,//图例的高度
                itemGap: 0,//图例之间的间距
                data: ['大豆', '玉米', '水稻', '土豆']//图例的名字需要和饼图的name一致，才会显示图例
            },
            series: [ //系列列表
                {
                    type: 'pie',   //类型 pie表示饼图
                    center: ['60%', '50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                    radius: ['70%', '80%'],
                    itemStyle: {  //图形样式
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            label: {  //饼图图形上的文本标签
                                show: false //平常不显示
                            },
                            labelLine: {     //标签的视觉引导线样式
                                show: false  //平常不显示
                            },
                        }
                    },//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    data: []
                }, {
                    type: 'pie',   //类型 pie表示饼图
                    center: ['60%', '50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                    radius: ['50%', '60%'],
                    itemStyle: {  //图形样式
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            label: {  //饼图图形上的文本标签
                                show: false //平常不显示
                            },
                            labelLine: {     //标签的视觉引导线样式
                                show: false  //平常不显示
                            },
                        }
                    },//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    data: []
                }, {
                    type: 'pie',   //类型 pie表示饼图
                    center: ['60%', '50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                    radius: ['30%', '40%'],
                    itemStyle: {  //图形样式
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            label: {  //饼图图形上的文本标签
                                show: false //平常不显示
                            },
                            labelLine: {     //标签的视觉引导线样式
                                show: false  //平常不显示
                            },
                        }
                    },//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    data: []
                }, {

                    type: 'pie',   //类型 pie表示饼图
                    center: ['60%', '50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                    radius: ['10%', '20%'],
                    itemStyle: {  //图形样式
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            label: {  //饼图图形上的文本标签
                                show: false //平常不显示
                            },
                            labelLine: {     //标签的视觉引导线样式
                                show: false  //平常不显示
                            },
                        }
                    },//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形//饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    data: []
                }
            ]
        }
        $.each(json, function (index, item) {
            var newArray = {};
            var itemStyle = {};
            var normal = {};
            newArray.name = item.type;
            newArray.value = item.value;
            if (index == 1) {
                normal.color = '#83B15A';
            } else if (index == 2) {
                normal.color = '#DE9B32';
            } else if (index == 3) {
                normal.color = '#49B4D7';
            } else {
                normal.color = '#BF4746';
            }
            itemStyle.normal = normal;
            newArray.itemStyle = itemStyle;
            var newArray2 = {};
            var itemStyle2 = {};
            var normal2 = {};
            newArray2.name = item.type;
            newArray2.value = 100 - item.value;

            normal2.color = 'transparent';
            itemStyle2.normal = normal2;
            newArray2.itemStyle = itemStyle2;
            option.series[index].name = (item.type);
            option.series[index].data.push(newArray2);
            option.series[index].data.push(newArray);
        });
        myChart.setOption(option);
    }
});
/*-----------------------------------------main2----------------------------------------------*/
$.ajax({ //一个Ajax过程
    type: "post",  //以post方式与后台沟通
    url: "index/plantType", //与此php页面沟通
    dataType: 'json',//从php返回的值以 JSON方式 解释
    success: function (json) {
        var myChart = echarts.init(document.getElementById('main2'));
// 指定图表的配置项和数据
        var option = {
            tooltip: { //提示框组件
                trigger: 'item', //触发类型(饼状图片就是用这个)
                formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
            },
            color: ['#009DE6', '#8C4CE2', '#E24C68', '#E2B94C'],  //手动设置每个图例的颜色
            series: [ //系列列表
                {
                    name: '作物品种',  //系列名称
                    type: 'pie',   //类型 pie表示饼图
                    center: ['50%', '40%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                    radius: ['30%', '60%'],  //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                    itemStyle: {  //图形样式
                        normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            label: {  //饼图图形上的文本标签
                                show: true  //平常不显示
                            },
                            labelLine: {     //标签的视觉引导线样式
                                show: true  //平常不显示
                            }
                        },
                        emphasis: {   //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                            label: {  //饼图图形上的文本标签
                                show: true,
                                position: 'center',
                                textStyle: {
                                    fontSize: '10',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: []
                }
            ]
        };

        $.each(json, function (index, item) {
            var newArray = {};
            newArray.name = item.type;
            newArray.value = item.value;
            option.series[0].data.push(newArray);
        });

        myChart.setOption(option);
    }
});

/*----------------------------------------main3----------------------------------*/
$.ajax({ //一个Ajax过程
    type: "post",  //以post方式与后台沟通
    url: "index/GrainYield", //与此php页面沟通
    dataType: 'json',//从php返回的值以 JSON方式 解释
    success: function (json) {
        var myChart = echarts.init(document.getElementById('main3'));
        option = {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '8%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019'],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            series: [
                {
                    name: '土豆',
                    type: 'line',
                    stack: '总量',
                    symbol: 'none',  //这句就是去掉点的
                    smooth: true,  //这句就是让曲线变平滑的
                    data: []
                },
                {
                    name: '大豆',
                    type: 'line',
                    stack: '总量',
                    symbol: 'none',  //这句就是去掉点的
                    smooth: true,
                    data: [] //这句就是让曲线变平滑的
                },
                {
                    name: '玉米',
                    type: 'line',
                    stack: '总量',
                    symbol: 'none',  //这句就是去掉点的
                    smooth: true,  //这句就是让曲线变平滑的
                    data: []
                },
                {
                    name: '水稻',
                    type: 'line',
                    stack: '总量',
                    symbol: 'none',  //这句就是去掉点的
                    smooth: true,  //这句就是让曲线变平滑的
                    data: []
                }
            ]
        };
        $.each(json, function (index, item) {
            if (item.type == "土豆") {
                option.series[0].data.push(item.value);
            } else if (item.type == "大豆") {
                option.series[1].data.push(item.value);
            } else if (item.type == "玉米") {
                option.series[2].data.push(item.value);
            } else {
                option.series[3].data.push(item.value);
            }
        });
        myChart.setOption(option);
    }
});

/*-----------------------------------------main4------------------------------------------------*/

$.ajax({ //一个Ajax过程
    type: "post",  //以post方式与后台沟通
    url: "index/GrainSales", //与此php页面沟通
    dataType: 'json',//从php返回的值以 JSON方式 解释
    success: function (json) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main4'));

// 指定图表的配置项和数据
        var option = {
            tooltip: {},
            grid: {
                x: '10%',
                x2: '5%',
                y: '10%',
                y2: '20%'

            },
            legend: {
                data: ['销量'],
                x: 'right', // 'center' | 'left' | {number},
                y: 'top', // 'center' | 'bottom' | {number}
                textStyle: {    //图例文字的样式
                    color: 'white',  //文字颜色
                },
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',],
                    //设置轴线的属性
                    axisLine: {
                        lineStyle: {
                            color: '#ffffff',
                            width: 1,//这里是为了突出显示加上的
                        }
                    }
                }
            ],
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: '#ffffff',
                        width: 1,   //这里是为了突出显示加上的
                    },

                }
            },
            series: [
                {
                    name: "销量",
                    type: "bar",
                    data: [],
                    itemStyle: {
                        normal: {
                            color: function (d) {
                                return "#" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
                            }
                        }
                    },
                },

            ],
            label: {
                show: true,  //柱头数字
                position: 'top',
                textStyle: {
                    fontSize: '10',
                    fontFamily: '微软雅黑',
                    fontWeight: 'bold',
                    color: 'white'
                }
            }
        }
        $.each(json, function (index, item) {
            option.series[0].data.push(item.value);
        });
        myChart.setOption(option);
    }
});

